<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="admin/css/pearForm.css" />
		<link rel="stylesheet" href="component/layui/css/layui.css" />
		<link rel="stylesheet" href="admin/css/pearButton.css" />
		<style>
			.layui-form{width: 330px;margin: auto;margin-top: 180px;}
			.layui-form button{width: 100%;height: 44px;line-height: 44px;font-size: 16px;font-weight: 550;}
			.layui-form-checked[lay-skin=primary] i {border-color: #2D8CF0 !important;background-color: #2D8CF0;color: #fff;}
			.layui-tab-content{margin-top: 15px;padding-left: 0px;padding-right: 0px;}
			.layui-form-item{margin-top: 20px;}
			.layui-input{height: 44px;line-height: 44px;border-radius:4px!important;padding-left: 15px;}
			.layui-input:focus{box-shadow: 0px 0px 3px 1px #2D8CF0!important;}
			.logo{width: 60px;margin-top: 10px;margin-bottom: 10px;margin-left:20px;}
			.title{font-size: 30px;font-weight: 550;margin-left: 20px;color: #2D8CF0 !important;display: inline-block;height: 60px;line-height: 60px;margin-top: 10px;position: absolute;}
			.desc{width: 100%;text-align: center;color: gray;height: 60px;line-height: 60px;}
		    .disabled,.disabled:hover{opacity: 0.7;}
		</style>
	</head>
	<body background="admin/images/background.svg">
	    <form class="layui-form" action="javascript:void(0);">
			<div class="layui-form-item">
				<img class="logo" src="admin/images/logo.png" />
				<div class="title">Pear Admin</div>
				<div class="desc">
					高 新 区 最 具 影 响 力 的 设 计 规 范 之 一
				</div>
			</div>
            <div class="layui-form-item">
				<input name="username" placeholder="账 户 : admin" hover class="layui-input" />
			</div>
			<div class="layui-form-item">
				<input name="password" placeholder="密 码 : admin" hover class="layui-input" />
			</div>
			<div class="layui-form-item">
				<input type="checkbox" name="" title="记住密码" lay-skin="primary" checked>
			</div>
            <div class="layui-form-item">
				<button class="pear-btn pear-btn-primary" lay-submit="" lay-filter="login">
					登 入 
				</button>
			</div>
		</form>
		<script src="component/layui/layui.js"></script>
		<script>
			layui.use(['form', 'element','jquery','layer'], function() {
				var form = layui.form;
				var element = layui.element;
				var $ = layui.jquery;
				var layer = layui.layer;

				form.on('submit(login)', function(data){
					$("button[lay-filter='login']").append("<i style='font-size: 18px;' class='layui-anim layui-anim-rotate layui-anim-loop layui-icon layui-icon-loading-1'></i>");
					$("button[lay-filter='login']").attr("disabled","disabled");
					$("button[lay-filter='login']").addClass("disabled");
					var loading = layer.load();
					$.ajax({
						url:'/login',
						data:data.field,
						dataType:'json',
						type:'post',
						async:false,
						success:function(result){
							setTimeout(function(){
								layer.close(loading);
								$("button[lay-filter='login'] i").remove();
								$("button[lay-filter='login']").removeAttr("disabled");
								$("button[lay-filter='login']").removeClass("disabled");


								if(result.code==200){
									layer.msg(result.msg,{icon:1,time:1200},function(){
										location.href = "/index";
									})
								}else if(result.code==500){
									layer.msg(result.msg,{icon:2,time:1000});
								}
						    },2000)
						}
					})
                    return false;
				});

			})
		</script>
	</body>
</html>
